<template>
  <view class="app">
    <!-- 搜索 -->
    <view class="search-box">
      <input
        type="text"
        confirm-type="search"
        v-model.trim="searchKey"
        @confirm="search"
        maxlength="12"
        class="search-input flex-1"
        placeholder="请输入关键字搜索"
      />
      <view class="suffix" @click="search">
        <u-icon size="26" color="#b7b7b7" name="search"></u-icon>
      </view>
    </view>

    <view class="data-box">
      <view class="h-full">
        <z-paging
          ref="paging"
          class="paging-pot"
          v-model="dialogList"
          :default-page-size="limit"
          :fixed="false"
          :auto="false"
          :refresher-enabled="false"
          :show-loading-more-no-more-view="false"
          :auto-hide-loading-after-first-loaded="false"
          :min-delay="800"
          @query="getData"
        >
          <template #top>
            <!-- 分类 -->
            <z-tabs
              ref="tabRef"
              :list="categoryData"
              :current="activeIdx"
              :active-style="{ fontSize: '30rpx', fontWeight: '800' }"
              :inactive-style="{ fontSize: '30rpx' }"
              name-key="name"
              value-key="id"
              :scroll-count="1"
              :bar-width="40"
              :bar-height="7"
              :bottom-space="0"
              :active-color="config.theme.color"
              :tabs-style="{ padding: '0 16rpx', height: '80rpx' }"
              bg-color="#f5fffe"
              @change="changeTab"
            ></z-tabs>
          </template>

          <view
            class="cell-line"
            v-for="(item, idx) in dialogList"
            :key="idx"
            @click="nav.jump(`/pages/dialog/detail?id=${item.id}`)"
          >
            <view class="cell-prefix">
              <text>{{ idx + 1 }}</text>
            </view>
            <text class="cell-title">{{ item.title }}</text>
            <u-icon color="#b7b7b7" name="arrow-right" font-size="24"></u-icon>
          </view>
          <template #loading>
            <view class="loading">
              <mt-logo-loading :size="88"></mt-logo-loading>
            </view>
          </template>
        </z-paging>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
  import mtLogoLoading from '@/components/mt-loading/mt-logo-loading.vue';
  import { ref } from 'vue';
  import { onReady } from '@dcloudio/uni-app';
  import { report } from '@/utils/exception';
  import { nav } from '@/utils/homer';
  import { config } from '@/config/env';
  import { getDialogCategory as getCategoryDataApi, getDialog as getDataApi } from '@/api/dialog/index';
  import type { DialogCategory, DialogList } from '@/types/dialog';

  const searchKey = ref<string>('');
  const categoryData = ref<DialogCategory[]>([]);
  const dialogList = ref<DialogList[]>([]);
  const topHeight = ref<number>(90);
  const potHeight = ref<number>(0);
  const activeIdx = ref<number>(0);
  const paging = ref();

  let limit = 15;

  let searchKeyTemp = '';
  const search = () => {
    if (searchKey.value == searchKeyTemp) return false;
    searchKeyTemp = searchKey.value;
    paging.value.reload();
  };

  onReady(() => {
    uni.getSystemInfo({
      success(res) {
        potHeight.value = (res.windowHeight - topHeight.value) / (uni.upx2px(100) / 100);
      },
    });
  });

  const getData = (pageNo: number, pageSize: number) => {
    getDataApi(pageNo, pageSize, categoryData.value[activeIdx.value].id, searchKey.value)
      .then((res) => {
        paging.value.complete(res.data.list);
      })
      .catch((err) => {
        report(err);
        paging.value.complete(false);
      });
  };

  const getCategoryData = () => {
    getCategoryDataApi()
      .then((res) => {
        // console.log(res);
        categoryData.value = res.data.list;
        categoryData.value.unshift({
          id: 0,
          name: '全部',
        });
        paging.value.reload();
      })
      .catch((err) => {
        report(err);
      });
  };
  getCategoryData();

  const changeTab = (index: number) => {
    activeIdx.value = index;
    paging.value.reload();
  };
</script>

<style lang="scss" scoped>
  .search-box {
    display: flex;
    align-items: center;
    margin: 30rpx 30rpx 0;
    background: white;
    padding: 20rpx 30rpx;
    border-radius: 100rpx;

    .search-input {
      font-size: 26rpx;
      color: #9f9f9f;
    }

    .suffix {
      padding-left: 15rpx;
    }
  }

  .data-box {
    margin: 30rpx;
    background: white;
    border-radius: 30rpx;
    overflow: hidden;
    height: v-bind("potHeight + 'rpx'");
  }

  .paging-pot {
    height: 100%;
    // margin-bottom:120rpx;

    .cell-line {
      display: flex;
      align-items: center;
      padding: 30rpx 30rpx;

      &:not(:last-child) {
        border-bottom: 1px solid #f0f0f0;
      }

      &:nth-child(-n + 3) .cell-prefix {
        color: $themeColor;
      }

      .cell-prefix {
        padding-right: 10rpx;
        font-weight: 600;
        font-size: 35rpx;
        color: #979797;
        width: 80rpx;
        flex: none;
        text-align: center;
      }

      .cell-title {
        flex: 1 1 auto;
        font-size: 28rpx;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }

    .loading {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 700rpx;
    }
  }
</style>
